    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="utf-8"/>
<style>
header a{
}

input[type=text]{
background:#FFFFED;
font-size:18px;
}

input[type*=pass]{
background:#B0E2FF ;
font-size:18px;
}

setion img:first-of-type{
width:130px;
heigh:250px;
}

section li{
color:blue;
}

footer a{
color:pink;
}
</style>


<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<head>
     <title>网易邮箱登录</title>
</head>


<!--第一步，先把网页划分结构 该网页大概分为三部分，上header中seation下footer结构-->
<!--其次，header头部里面分为两部分左和右，左边放logo，右边是文字，再跳转文字网址-->
<!--alt="logo"替代图片的文字，在图片无法显示的时候，添加alt，在鼠标点击文字的时候，可以帮助跳转显示图片-->
<body>
     <header>
     <h1><a href="#"><img src="163logo.gif" alt="logo"></a></h1>
     <p>
            <a href="#">免费邮</a>
            <a href="#"> 企业邮</a>
            <a href="#">VIP邮箱</a>
            <a href="#">帮助</a>
        </p>
     </header>
</body>
<!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单-->
    <section>
<!--左边-->
<!--div 可定义文档中的分区或节(division/section)。 div 标签可以把文档分割为独立的、不同的部分。
它可以用作严格的组织工具,并且不使用任何格式与其关联。 如果用 id 或 class 来标记 div,那么该标签的作用会变得更加有效。 
注释:div 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。 提示:请使用 div 元素来组合块级元素,这样就可以使用样式对它们进行格式化。”-->
        <div>
            <img src="imap.jpg" />
            <ul>
                <li>163/126/yeah三大免费邮箱均默认开放</li>
                <li>全面支持iPhone/iPad及Android等系统</li>
                <li>客户端、手机与网页，实现发送、阅读邮件</li>
            </ul>
            <a href="#">立即同步普通登录手机号登录</a>
        </div>

<!--右边-->  
<!--form表单 action网址 method="get"或者是"post",得到的结果其中post是结果，用于长的文本和安全性的考虑但是要添加很多的东西，get适合初学者-->  
<!--select选择 option选项 selected默认选中 vaule=”框里输入什么就是什么”checkbox 复选框-->

    <form action="#" method="get">
            <p>
                用户名：
                <input type="text" name="userName" />
                @163.com
            </p>
            <p>
                密码：
                <input type="password" name="pass" />
            </p>
            <p>
                版本：
                <select >
                    <option>默认</option>
                    <option>2018</option>
                    <option>2017</option>
                    <option>2016</option>
                    <option>2015</option>
                </select>
            </p>
            <p>
                <input type="checkbox" >自动登录
                <input type="checkbox" checked/>SSL
            </p>
        </form>
    </section>


<!--底部-->
    <footer>
        <img src="netease_logo.gif" alt="logo"/>
        <a href="#">关于网易</a>
        <a href="#">免费邮 </a>
        <a href="#">官方博客</a>
        <a href="#">客户服务 </a>
        <a href="#">隐私政策</a>|
        <a href="#">网易公司版权所有  &copy; 2015-2018</a>
    </footer>
</body>
</html>